<template>
    <div style="background:#fff;height:100%">
        <div v-title>绑定</div>
        <div class="header">
            <p>欢迎使用百分保</p>
            <p>welcome</p>
        </div>
        <div class="content">
            <van-row class="celler" style="margin:0">
                <van-col span="2">
                    <span class="iconfont icon-yonghuming"></span>
                </van-col>
                <van-col span="22"><input placeholder="请输入手机号" v-model="Phone" /></van-col>
            </van-row>
            <van-row>
                <van-col span="17">
                    <van-row class="celler">
                        <van-col span="3">
                            <span class="iconfont icon-shoujiyanzhengma"></span>
                        </van-col>
                        <van-col span="21"><input placeholder="请输入验证码" v-model="Code" /></van-col>
                    </van-row>
                </van-col>
                <van-col span="7">
                    <div class="coder" @click="GetCode" v-show="!computedTime">获取验证码</div>
                    <div class="coder" v-show="computedTime">{{computedTime}}s</div>
                </van-col>
            </van-row>
            <van-row class="celler">
                <van-col span="2">
                    <span class="iconfont icon-mima"></span>
                </van-col>
                <van-col span="22"><input placeholder="请设置登录密码" v-model="Password" type="password" /></van-col>
            </van-row>
            <van-row class="celler">
                <van-col span="2">
                    <span class="iconfont icon-mima"></span>
                </van-col>
                <van-col span="22"><input placeholder="请确认登录密码" v-model="TruePassword" type="password" /></van-col>
            </van-row>
        </div>
        <div style="padding:0 30px">
            <div class="binder" @click="BindPhone">绑定</div>
        </div>
    </div>
</template>
<style src="../css/iconfont.css"></style>
<script>
import api from '../fetch/api.js';
import { Row, Col, Toast } from 'vant';
export default {
    components: {
        [Row.name]: Row,
        [Col.name]: Col,
        [Toast.name]: Toast,
    },
    data() {
        return {
            Password: '',
            TruePassword: '',
            Code: '',
            Phone: '',
            computedTime: 0,
        }
    },
    created() {
        if (localStorage.getItem('openid') == "" || ocalStorage.getItem('openid') == null) {
            location.href = 'http://m.nbbaijin.com/';
        }
    },
    methods: {
        //绑定
        BindPhone() {
            if (this.Phone == '') {
                Toast('请输入手机号码')
                return
            }
            if (this.Code == '') {
                Toast('请输入验证码')
                return
            }
            if (this.Password == '') {
                Toast('请设置登录密码')
                return
            }
            if (this.TruePassword == '') {
                Toast('请确认登录密码')
                return
            }
            if (this.Password != this.TruePassword) {
                Toast('两次密码输入不一致，请重新输入')
                return
            }
            api.BindPhone({
                OpenID: localStorage.getItem('openid'),
                Password: this.Password,
                TruePassword: this.TruePassword,
                Phone: this.Phone,
                Code: this.Code
            }).then(res => {
                if (res.Success) {
                    Toast(res.Msg)
                    setTimeout(() => {
                        this.$router.push('/')
                    }, 1000)
                } else {
                    Toast(res.Msg)
                }
            })
        },
        //获取验证码
        GetCode() {
            if (this.Phone == '') {
                Toast('请输入手机号码')
                return
            }
            this.computedTime = 60;
            this.timer = setInterval(() => {
                this.computedTime--;
                if (this.computedTime == 0) {
                    clearInterval(this.timer)
                }
            }, 1000)
            api.SendValidation({
                Phone: this.Phone
            }).then(res => {
                Toast(res.Msg)
            })
        }
    }
}
</script>
<style scoped>
p {
    margin: 0
}

.header {
    text-align: center;
    padding: 40px 0;
}

.header p:first-child {
    font-size: 24px;
    color: #2491ff
}

.header p:last-child {
    font-size: 24px;
    color: #cccccc;
    margin-top: 10px;
}

.content {
    padding: 0 30px
}

.celler {
    border-bottom: 1px solid #cbcbd1;
    color: #999999;
    margin-top: 20px;
}

.celler input {
    width: 100%;
    border: none;
}

.celler .van-col {
    padding: 5px
}

.coder {
    color: #2491ff;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
    border: 1px solid #2491ff;
    border-radius: 15px;
    line-height: 30px;
}

@media screen and (max-width: 374px) {
    .coder {
        font-size: 12px
    }
}

.binder {
    line-height: 40px;
    text-align: center;
    background: #2491ff;
    border-radius: 20px;
    margin-top: 20px;
    color: #fff;
}
</style>